import { css } from '@emotion/react'
import { Link, Modal } from '@/desktop/components'

export { ReactComponent as Icon } from './icon.svg'

export function MobileApp({ open, onClose }: { open: boolean; onClose: () => void }) {
  return <Modal title="移动 App" footer={null} width="650px" open={open} onCancel={onClose}>
    {open ? <Content /> : null}
  </Modal>
}

function Content() {
  return <div css={styles.wrap}>
    <div className="platform">
      <header>苹果 iOS</header>
      <img src="app-ios.png" />
      <div className="sep">或</div>
      <Link href="https://apps.apple.com/us/app/%E5%85%89%E5%B9%B4rpa%E6%9C%BA%E5%99%A8%E4%BA%BA/id6449965475?platform=iphone">
        点击链接查看
      </Link>
    </div>

    <div className="platform">
      <header>安卓 Android</header>
      <img src="app-android.png" />
      <div className="sep">或</div>
      <Link href="https://file.gnlab.com/quntool/quntool.html">点击链接下载</Link>
    </div>
  </div>
}

const styles = {
  wrap: css`
    display: flex;
    justify-content: space-around;

    .platform {
      text-align: center;
    }
    header {
      font-size: 18px;
      margin-bottom: 3px;
    }
    img {
      width: 125px;
      height: 125px;
    }
    .sep {
      margin: 5px 0 8px 0;
    }
  `,
}
